
<template>
  <div class="or-wrap" v-loading ="loading">
    <div class="or-wrap-header">
      <div class="or-wrap-header-left">
        <div class="or-wrap-search">
          <div class="or-shop-name">
            <span class="or-color">商品名称:</span>
          </div>
          <div class="or-ipt">
            <input class="or-ipt-name" type="text" placeholder="请输入商品名称" v-model="title" />
          </div>
        </div>
        <div class="or-status-continer">
          <div class="or-status"><span class="or-color">状态:</span></div>
          <div class="or-status-wrap">  
            <div class="top-shelf" @click="statusShow=!statusShow">
              <p>{{selectList[selectIndex].name}}</p>
              <img :class="statusShow ? 'or-xlimg' : ''" src="~/assets/images/gs-xl.png">
              <div class="or-line-title-list" v-show="statusShow">
                <div class="or-line-list-item" v-for="(item,index) in selectList" :key="index" @click.stop="selsectItem(item,index)" >{{item.name}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="or-wrap-header-right">
        <div class='or-query-shop' @click="search">查找商品</div>
        <div class='or-query-shop' @click="add">添加商品</div>
        <div class='or-query-shop' @click="synchronize">同步商品</div>
      </div>
    </div>
    <div class="or-list-container">
      <div class="or-wrap-list one">
        <div class="or-wrap-item">
          <div class="or-wrap-item-img">
            <p>商品图片</p>
          </div>
        </div>
        <div class="or-wrap-item name">
          <div class="or-wrap-item-img">
            <p>商品名称 </p>
          </div>
        </div>
        <div class="or-wrap-item legend">
          <div class="or-wrap-item-img">
            <p>类目</p>
          </div>
        </div>
        <div class="or-wrap-item save">
          <div class="or-wrap-item-img">
            <p>库存</p>
          </div>
        </div>
        <div class="or-wrap-item save">
          <div class="or-wrap-item-img">
            <p>售价</p>
          </div>
        </div>
        <div class="or-wrap-item save">
          <div class="or-wrap-item-img">
            <p>佣金</p>
          </div>
        </div>
        <div class="or-wrap-item sale">
          <div class="or-wrap-item-img">
            <p>销量</p>
          </div>
        </div>
        <!-- <div class="or-wrap-item status">
          <div class="or-wrap-item-img">
            <p>销售状态</p>
          </div>
        </div> -->
        <div class="or-wrap-item goodsstatus">
          <div class="or-wrap-item-img">
            <p>商品状态</p>
          </div>
        </div>
        <div class="operation">
          <div class="or-wrap-item-img">
            <p>操作</p>
          </div>
        </div>
      </div>
      <template v-if="shopList.length">
        <div class="or-wrap-list two" v-for="(item,key) in shopList" :key="key">
          <div class="or-wrap-item">
            <div class="or-wrap-item-img">
              <!-- <img :src="item.mainUrl"> -->
              <img v-lazy="item.mainUrl" :key="item.mainUrl">
            </div>
          </div>
          <div class="or-wrap-item name">
            <div class="or-wrap-item-img">
              <p :title="item.name">{{item.skuName}}</p>
            </div>
          </div>
          <div class="or-wrap-item legend">
            <div class="or-wrap-item-img">
              <p>{{item.categoryName}}</p>
            </div>
          </div>
          <div class="or-wrap-item save">
            <div class="or-wrap-item-img">
              <p>{{item.skuStock}}</p>
            </div>
          </div>
          <div class="or-wrap-item save">
            <div class="or-wrap-item-img">
              <p>¥{{item.price}}</p>
            </div>
          </div>
          <div class="or-wrap-item save">
            <div class="or-wrap-item-img">
              <p>{{item.commission}}</p>
            </div>
          </div>
          <div class="or-wrap-item sale">
            <div class="or-wrap-item-img">
              <p>{{item.volume}}</p>
            </div>
          </div>
          <!-- <div class="or-wrap-item status" v-show="item.auditStatus == '审核通过'"> -->
          <div class="or-wrap-item goodsstatus" v-show="item.auditStatus == '审核通过'">
            <div class="or-wrap-item-img">
              <p><span class="or-btn-wrap" :class="shelfFontColor(item.shelfStatus)">{{item.shelfStatus}}</span></p>
            </div>
          </div>
          <div class="or-wrap-item goodsstatus" v-show="item.auditStatus == '待审核' || item.auditStatus == '审核待修改'">
            <div class="or-wrap-item-img">
              <p><span class="or-btn-wrap" :class="goodsStatus(item.auditStatus)">{{item.auditStatus}}</span></p>
            </div>
          </div>
          <div class="operation">
            <div class="or-wrap-item-img or-btn-wrap">
              <div class="or-btn or-btn-active" @click="clickPalt(item,1)" v-show = "item.auditStatus !== '待审核'">编辑</div>
              <div class="or-btn or-btn-active" @click="clickPalt(item,2)" v-show = "item.auditStatus !== '待审核'" v-if="item.shelfStatusCode === '1'">下架</div>
              <div class="or-btn or-btn-active" @click="clickPalt(item,3)" v-if="item.shelfStatusCode === '0'" v-show = "item.auditStatus !=='审核待修改'">上架</div>
            </div>
          </div>
        </div>
      </template>
      <div class="no-wrap" v-else>暂无数据</div>
      <div class="pagination"  v-show = "total > 0">
        <el-pagination
         	background
          :current-page = "pageNum"
          @current-change="changeCurrentPage"
          :page-sizes="[8,16,24]"
          @size-change="changeCurrentPageSize"
          :total = "total"
          layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
        <div class="pageSearch" @click="pageSearch">确定</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
 async fetch({store}) {
    await store.commit('setKuaiShou', 1)
  },
  layout: 'internalouts',
  data(){
    return{
      selectIndex: 0,
      selectList:[//上下架(1上架 0下架)
        {name:'全部',id:''},
        {name:'上架',id:'1'},
        {name:'下架',id:'0'},
      ],
      statusShow:false,
      btnIndex:0,//控制点击切换按钮的状态
      editIndex:null,//控制上架下架的按钮索引
      shopList:[],//商品列表
      shelfStatus:'',//上下架(1上架 0下架)
      title:'', // 搜索商品名
      pageNum:1, //第一页
			pageSize:8, //每页的条数
      total:0, //总条数
      loading:true, //页面加载效果
      // ksAccount:{},
      test:"",
      platData:[],
    }
  },
  computed:{
    shelfFontColor(){ //判断上架还是下架的字体颜色
      return function(status){
        return {
          'or-top-shelf':status === '在售',
          'or-bottom-shelf':status === '已下架'
        }
      }
    },
    goodsStatus(){ //判断上架还是下架的字体颜色
      return function(status){
        return {
          'or-top-shelf1':status === '审核通过',
          'or-bottom-shelf':status === '审核待修改'
        }
      }
    },
    shopId(){
      return this.$store.state.ksAccount1.shopId
    }
  },
  methods:{
    changeCurrentPage(page){ //改变当前页数
      this.pageNum = page; //赋值给当前页
      this.getData(); //调用商品列表接口
      this.$scrollTo();
    },
    changeCurrentPageSize(pageSize){ //改变条数
      this.pageNum = 1; //重新请求第一页
      this.pageSize = pageSize;  //设置条数
      this.getData();//调用商品列表接口
      this.$scrollTo();
    },
    pageSearch(){ //点击确定按钮时候调用分页事件
      this.getData();//调用商品列表接口
      this.$scrollTo();
		},
    selsectItem(item,index) {//下拉框
      this.statusShow=false;
      this.selectIndex = index;
      this.pageNum = 1;
      this.shelfStatus = item.id;
      this.getData();
    },
    clickPalt(item,type){//操作按钮 type=1编辑，2下架 ，3上架
      if (type === 2) {//下架
        this.putOrOnGoods(0,item.plGoodsID);
      } else if (type === 3) {//上架
        this.putOrOnGoods(1,item.plGoodsID);
      } else {//编辑
        this.$router.push({
          path:'/multiPlat/editgoods',
          query:{ksItemId:item.plGoodsID,shopId:this.shopId}
        })
      }
    },
    // 点击搜索
    search() {
      this.pageNum = 1;
      this.getData();
    },
    // 添加商品
    add() {
      this.$router.push({
        path:'/multiPlat/kuaishou',
        // query:{}
      })
    },
    //同步商品
    synchronize() {
      this.loading = true;
      let params ={
        shopId: this.shopId, // 店铺ID
      }
      this.$axios.$post('syncKsGoods',params).then(res => {
        this.loading = false;
        if(res.status === 200 ){
          this.$message({
            message:res.msg,
            type:'success',
            duration:1000
          });
          this.pageNum = 1;
          this.getData();
        }else{
          this.$message.warning(res.msg);
        }
      })
      .catch(error => {
        this.$message.warning('请求失败');
        this.loading = false;
      })
    },
    // 商品上架或下架
    putOrOnGoods(type,ksItemId) {
      this.loading = true;
      let params ={
        ksItemId: ksItemId,// 商品ID
        shopId: this.shopId, // 店铺ID
        type: type, // 上架1 ，下架0
      }
      this.$axios.$post('ksMerchantItemStatusUpdate',params).then(res => {
        this.loading = false;
        if(res.status === 200 ){
          this.getData();
        }else{
          this.$message.warning(res.msg);
        }
      })
      .catch(error => {
        this.$message.warning('请求失败');
        this.loading = false;
      })
    },
    getData(){
      this.loading = true;
      let params ={
        pageNum: this.pageNum, //页数
        pageSize: this.pageSize, //每页的条数
        shelfStatus: this.shelfStatus,// 上架下架
        title: this.title,// 商品名
        shopId: this.shopId, // 店铺ID
      }
      this.$axios.$post('ksMerchantItemList',params).then(res => {
        this.loading = false;
        if(res.status === 200 ){
          this.shopList = res.obj.list;
          this.total = res.obj.total; //未来拿到总条数
        }else{
          if(this.test){
            this.test.close()
          }
          this.test = this.$message.warning(res.msg);
        }
      })
      .catch(error => {
        if(this.test){
            this.test.close()
          }
        this.test = this.$message.warning("请求失败");
        this.loading = false;
      })
    }
  },
  mounted(){
    // this.ksAccount = localStorage.getItem('ksAccount') ? JSON.parse(localStorage.getItem('ksAccount')):{}; //拿到商品ID
    this.getData();
  }
}
</script>

<style scoped>
  .or-wrap{
    padding:20px 20px 50px;
    background:#ffffff;
  }
  .or-wrap-header{
    display:flex;
    height:30px;
  }
  .or-wrap-header-left{
    display:flex;
  }
  .or-wrap-search{
    display:flex;
    align-items:center;
    margin-right:40px;
  }
  .or-shop-name{
    margin-right:12px;
  }
  .or-color{
    color:#666666;
    white-space: nowrap;
  }
  .or-ipt-name{
    width:254px;
    height:30px;
    text-indent:10px;
    border:1px solid rgba(225,225,225,1);
    box-sizing:border-box;
    border-radius:4px;
  }
  .or-ipt-name:focus{
    border:1px solid #0096e6;
  }
  .or-status-continer{
    display:flex;
    align-items:center;
    height:30px;
  }
  .or-status-wrap{
    width:113px;
    height:30px;
    border:1px solid rgba(225,225,225,1);
    box-sizing:border-box;
    border-radius:4px;
  }
  .or-status{
    margin-right:12px;
  }
  .top-shelf{
    position:relative;
    cursor:pointer;
    height:30px;
    line-height:30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color:#666666;
  }
  .top-shelf p{
    padding:0 10px;
  }
  .top-shelf img {
    width: 11px;
    height: 6px;
    margin-right: 8px;
    transition: all .2s;
    user-select: none;
  }
  .or-line-title-list {
    font-size: 14px;
    color: #333;
    width: 112px;
    height: 89px;
    border-radius: 5px;
    background: #fff;
    position: absolute;
    z-index: 2;
    top: 34px;
    left: 0;
    box-shadow: 0px 1px 5px #888888;
    user-select: none;
  }
  .or-line-list-item {
    cursor: pointer;
    height: 30px;
    line-height: 30px;
    padding-left: 10px;
  }
  .or-line-list-item:hover {
    background: #ebf7fd;
  }
  .or-xlimg {
    transform: rotate(-180deg)
  }
  .or-wrap-header-right{
    height:30px;
    display:flex;
    margin-left: 30px;
  }
  .or-query-shop{
    width:90px;
    height:30px;
    line-height:30px;
    text-align:center;
    background:#0096e6;
    color: #fff;
    border-radius:15px;
    cursor:pointer;
    margin-left:20px;
  }
  .or-query-shop:hover{
    background:#66B1FF;
  }
  .or-shop-active{
    color:#ffffff;
    background:#0096E6;
  }
  .or-add-active{
    color:#ffffff;
    background:#0096E6;
  }
  .or-list-container{
    margin-top:30px;
  }
  .or-list-container .one{
    height:30px;
  }
  .or-list-container .one p{
    color:#333333;
    font-weight:400;
  }
  .or-list-container .two{
    height:113px;
  }
  .or-wrap-list:nth-child(odd){
    background:#f8f9fb;
  }
  .or-wrap-list{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
  }
  /* 916.03 */
  .or-wrap-item{
    display:flex;
    align-items:center;
    justify-content:center;
    width:13.1%;
    height:30px;
    text-align:center;
    color:#666666;
  }
  .or-wrap-item-img p{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
    font-weight: 400;
    height: 16.8px;
    line-height: 1.2;
  }
  .or-wrap-item-img img{
    width:80px;
    height:80px;
  }
  .or-wrap-list .legend{
    width:8.64%;
  }
  .or-wrap-list .save{
    width:9.55%;
  }
  .or-wrap-list .sale{
    width:9.55%;
  }
  .or-wrap-list .status{
    width:9.64%;
  }
  .or-wrap-list .goodsstatus{
    width:11.92%;
  }
  .or-wrap-list .operation{
    width:14.47%;
  }
  .operation{
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .operation p{
    text-align:center;
  }
  .or-btn-wrap{
    display:flex;
  }
  .or-btn-wrap .or-btn{
    width:60px;
    height:28px;
    line-height:28px;
    text-align:center;
    color:#0096E6;
    background:#F0F9FE;
    border-radius:15px;
    cursor:pointer;
    font-size:14px;
    user-select:none;
    margin-right:5px;
  }
  .or-btn-wrap .or-btn:hover{
    background:#66B1FF;
  }
  /* 三种字体状态颜色 */
  /* 冻结字体颜色 */
  .or-freeze-active{ 
    color:#0096E6;
  }
  /* 下架字体颜色 */
  .or-bottom-shelf{
    color:#e73547;
  }
  /* 上架字体颜色 */
  .or-top-shelf{
    color:#20ba39 !important;
  }
  .or-top-shelf1{
    color:#20ba39 !important;
  }
  .or-btn-wrap .or-btn-active{
    color:#ffffff;
    background:#0096E6;
  }
  /* 按钮禁用 */
  .or-btn-wrap .or-btn-disabled{
    color:#999999;
    background:#EFEFEF;
    pointer-events: none;
    cursor: not-allowed;
  }
  .disabled-wrap{
    cursor: not-allowed;
  }
  /* 分页样式 */
  .pagination{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    margin:20px 0 50px 0;
  }
  .pagination .pageSearch{
    width:60px;
    height:28px;
    line-height:28px;
    text-align:center;
    border-radius:15px;
    background:#0096e6;
    color:#ffffff;
    font-size:14px;
    cursor:pointer;
    margin:0 10px;
    user-select:none;
  }
  .pagination .pageSearch:hover{
    background:#66B1FF;
  }
  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
    background-color:#0096e6;
  }
   /* table表格的暂无数据 */
  .no-wrap{
    height:60px;
    line-height: 60px;
    text-align:center;
    font-size: 14px;
    color: #909399;
    border:1px solid #EBEEF5 ;
    margin-bottom:20px;
  }
  input::-webkit-input-placeholder{
		color:#C0C4CC;
	}
	input::-moz-input-placeholder{
		color:#C0C4CC;
	}
	input:-ms-input-placeholder{
		color:#C0C4CC;
	}
</style>
